<template>
  <div class="app-container">
    <div class="block" style="padding: 0 !important; margin: 0">
      <div class="query-wrapper" model="queryParams">
        <el-select v-model="queryParams.vesselName" clearable filterable placeholder="Vessel" @change="selectVessel" style="width:180px">
          <el-option :key="item.vesselName" :label="item.vesselName" :value="item.vesselName" v-for="item in vessels">
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-select
          v-model="queryParams.voyageNo"
          clearable
          filterable
          placeholder="Voyage"
          style="width: 130px"
          @change="selectVoyage" >
          <el-option :key="item.voyageNo" :label="item.voyageNo" :value="item.voyageNo" v-for="item in voyages">
          </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-select v-model="queryParams.pol" filterable clearable placeholder="POL">
          <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pols"> </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-select v-model="queryParams.pod" filterable clearable placeholder="POD">
          <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pods"> </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-select v-model="queryParams.clientName" filterable clearable allow-create placeholder="Client">
          <el-option :key="item.fullName" :label="item.fullName" :value="item.fullName" v-for="item in clients"> </el-option>
        </el-select>
        &nbsp;&nbsp;
        <el-button type="primary" icon="search" @click="search">{{ $t("ship.button.search") }}</el-button>
         <SearchReset :query-params="queryParams" @reset="resetQuery"></SearchReset>
      </div>
    </div>
      <div style="margin:-10px 0 11px 0;">
       <el-button type="primary" plain @click="applicationNo" v-hasPermi="['fixtureNote:apply']"> F/N  Apply </el-button>
       <el-button  type="primary"  plain  icon="plus"  @click="addClickEvent">{{ $t("ship.button.plus") }}</el-button> 
       <el-button type="warning" plain icon="download" v-hasPermi="['fixtureNote:export']" @click="exportFixtureNo"> Export F/N List </el-button>
        <el-button   type="danger"  plain  icon="delete"  :disabled="single" @click="removeClickEvent2">Delete</el-button>
        &nbsp;
        <el-dropdown  trigger="click" > 
             <el-button type="warning" plain   :disabled="single">
                Export<el-icon class="el-icon--right"><arrow-down /></el-icon>
             </el-button> 
            <template #dropdown>
              <el-dropdown-menu v-if="selectList.length==1 ">
                 <el-dropdown-item fixed="right" class="btn-primary" @click="handleExport2(0)">WORD</el-dropdown-item>
                <el-dropdown-item fixed="right" class="btn-primary" @click="handleExport2(1)"> PDF </el-dropdown-item> 
              </el-dropdown-menu>
            </template>
        </el-dropdown>
        &nbsp;
        <el-button   type="primary"  plain  icon="view"  :disabled="single" @click="previewClickEvent">{{ $t("Preview") }}</el-button>&nbsp;
        
        <el-button   type="primary"  plain  icon="edit"  :disabled="single" @click="editClickEvent2">{{ $t("ship.button.edit") }}</el-button>  
     </div> 
    <el-table stripe :data="listData"  v-loading="isLoading"  style="width: 100%;" max-height="800px" ref="tableRef" 
      :border="true" show-overflow-tooltip   @sort-change="handleSortChange"  @selection-change="handleSelectionChange">
      <el-table-column type="selection"  width="35" /> 
      <el-table-column prop="fixtureNo" label="Fixture No" width="200">
        <template #default="scope">
        <el-link type="primary" :underline="false"  @click="editClickEvent(scope.row)">{{scope.row.fixtureNo}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="fixtureDate" label="Date" width="110" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="clientCode" label="Client Code" width="120" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="clientName" label="Client Name" width="220" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <!-- <el-table-column prop="status" label="Status" width="160">
        <template #default="scope"> 
          {{ (scope.row.signedFile == null ||scope.row.signedFile =="")?"DRAFT":"CONFIRM" }}
        </template>
      </el-table-column> -->
      <el-table-column   label="SIGNED FILE" width="220" >
         <template #default="scope">  
          <div>
            <el-button size="small" v-if="scope.row.status == 1 || scope.row.status == 2"  @click="handleUploadClick({ row: scope.row, accept: '.pdf' })"><el-icon><Upload /></el-icon></el-button>
            <el-link  v-if="scope.row.signedFile"  href="javascript:void(0)" @click="pdfPreviewHandle(scope.row.signedFile)">{{ getFileName(scope.row.signedFile) }}</el-link> 
          </div> 
        </template>
      </el-table-column>  
      <el-table-column prop="carrierCode" label="Carrier Code" width="100" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="vesselName" label="Vessel Name" width="120" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="voyageNo" label="Voyage" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="pol" label="POL" width="140" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="pod" label="POD" />
      <el-table-column label="LAYCAN" width="180">
        <template #default="scope"> {{ scope.row.laycanStart }} --{{ scope.row.laycanEnd }} </template>
      </el-table-column>
     <el-table-column prop="status" label="Status" width="120" fixed="right" >
        <template #default="scope"> 
          <el-select 
            v-model="scope.row.status"
            class="ipt"
            clearable
            :disabled="scope.row.status != 0 || scope.row.fixtureDate == null " 
            @change="handleStatus(scope.row)" >
            <el-option :key="index" :label="item" :value="index" v-for="(item, index) in statuss"/>
          </el-select>  
        </template>
      </el-table-column>  
    </el-table>
  <input type="file" id="upload-file-signedFile" @change="uploadFile($event)" :accept="inputAccept" style="display: none;" />
    <pagination
      v-show="total > 0"
      :total="total"
      :page="queryParams.pageNum"
      :limit="queryParams.pageSize"
      @pagination="pageQuery"
      style="float: right"
    />
  </div>

  

  <el-dialog
    class="add_dialog"
    destroy-on-close
    draggable
    title="Comment"
    v-model="dialogCommentVisible"
  ></el-dialog>
</template>
<script lang="ts" setup name="fixtureNote">
import moment from "moment";
import { ref, onMounted, reactive, toRefs, watch, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import service from "@/utils/request";
import { useTableDrag } from "@/hooks/useHooks";
import { downloadFile } from "@/utils/downloadFile";
import PreViewImageUpload from "@/components/ImageUpload/PreViewImageUpload.vue";
const { proxy } = getCurrentInstance();
const { tableRef } = useTableDrag();
const route = useRoute();
const router = useRouter();
import { ElNotification, ElMessageBox, ElMessage, scrollbarProps } from "element-plus";
import {convertUrl} from "@/utils/tencentCos";
const templateTypes = ["Standard", "AICC"];
const custForm = ref(null);
const dialogTitle = ref("");  
const data = reactive({
  multiple : ref(true),
  single :ref(false),
  shippingTermsList: ref(["FLT", "FIO", "FILO", "LIFO"]),
  isTable : false,
  total: ref(0),
  statuss: ["Draft", "Confirmed", "Reject"]
})
const {multiple,single,shippingTermsList,isTable,total,statuss} = toRefs(data)
const uploadUrl = "shipping/fixtureNote/upload";
const uploadUrlAppendix = "shipping/fixtureNote/uploadAppendix";
 
const accept = ".xlsx,.xls";
const initForm = {
  fixtureNo: null,
  clientName: null,
  carrierCode: null,
  carrierName: null,
  vesselName: null,
  voyageNo: null,
  clientCode: null,
  contactName: null,
  pol: null,
  pod: null,
  paymentDay: null,
  ladingDay: null,
  email: null,
  laycanStart: null,
  laycanEnd: null,
  laycan: null,
  terms: <any>[],
  units: null,
  cargoType: null,
  totalCbm: null,
  readinessDate: null,
  shippingTerms: null,
  otherClauses: "",
  fixtureDate: moment(new Date()).format("YYYY-MM-DD"),
  signed: null,
  freightRate: null,
  detentionDay: null,
  deadFreightDay: null,
  fixtureId: null,
  readiness: null,
  readinessCN: null,
  cargoList: null,
  clause11: null,
  clause12:null,
  clause13: null,
  clause14:null,
  clause21:null
};

const selectList=ref([])
const handleSelectionChange=(val:any)=>{
  selectList.value=val
  single.value = selectList.value.length!=1
  multiple.value = !selectList.value.length
}

const freightRateBlur = () => {
  if (formParam.freightRate) {
    formParam.freightRate = Number(formParam.freightRate).toFixed(2);
  }
};

const pdfPreviewHandle = (url:string) => {
  const  pdfUrl=encodeURI(convertUrl(url))
  if(['pdf','docx','doc','xls','xlsx','txt'].some((item) => url.includes(item))){
    window.open(router.resolve({ path: '/pdfView/index', query: { pdfUrl: pdfUrl} }).href, '_blank')
  }else{
    downloadPDF(url)
  }
}
 // 获取文件名称
  function getFileName(name:string) { 
    // 如果是url那么取最后的名字 如果不是直接返回
    if (name.lastIndexOf("/") > -1) {
      return name.slice(name.lastIndexOf("/") + 1);
    } else {
      return name;
    }
  }

const uploadFile=(event)=>{
  const { row } = uploadParams.value
  const urlFile = document.querySelector('#upload-file-signedFile') 
  const uploadUrl = '/shipping/fixtureNote/uploadSignedFile'
  const formData = new FormData()
  formData.append('file', urlFile.files[0])
  formData.append('id', row.fixtureId) 
  service.post(uploadUrl, formData).then(res => {
    if (res.code === 0) {
      ElNotification.success({
        title: "Prompt information",
        message: "upload successful!",
        position: "bottom-right"
      });
      refreshTable();
    } else {
      ElNotification.error({
        title: "Prompt information",
        message: "upload failed!",
        position: "bottom-right"
      });
    }
  });
}
const clausesCheckedOne = ref(false);
const clausesCheckedTwo = ref(false);
const duesechecked = ref(false);

const terms = ref([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0]);

const formParam = reactive(Object.assign({}, initForm));

let disableStatus =[2]
const rules = ref({
  readiness: [{ required: true, message: "readiness is required", trigger: "blur" }]
});

let showForm = route.query?.showForm;

let clients = reactive([]);
let vessels = reactive([]);
let voyages = reactive([]);
let carriers = reactive([] as any);
let pols = reactive([]);
let pods = reactive([]);
const isLoading = ref(false);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  vesselName: null,
  voyageNo: null,
  fullName: null,
  pol:null,
  pod: null,
  orderByColumn: undefined,
  isAsc: undefined,
  type: 0
});

const listData = ref([]);
const refreshTable = async () => {
  await service.get("/shipping/fixtureNote/getTable", { params: queryParams }).then((result:any)=>{
    listData.value = result.data;
    total.value = result.total;
  })
 
};
const resetQuery = (data: any) => {
  Object.assign(queryParams, data);
  listData.value = [];
  total.value = 0;
};
const dialogFormVisible = ref(false);

let isAdd = false;

const editClickEvent2 = () => {
  let row=selectList.value[0]
  editClickEvent(row) 
};

const addClickEvent = ()=>{

}

const editClickEvent = (row:any) => { 
  if(row.status != 1 ||!row.fixtureDate){
	  if (row.templateType == 0) {
      localStorage.setItem("RECORD_DATA", JSON.stringify(row));
      router.push({ path: "/contract/fixtureNote", query: { showForm: true,fixtureNo: row.fixtureNo } });
		showForm = true;
	  } else {
      console.log("1111111111111111111")
      router.push({ path: "/contract/aiccFixtureNote" ,query: { fixtureNo: row.fixtureNo } });
      showForm = true;
	  }  
  }

};

let inputAccept = ref('')
let uploadParams = ref({})
const handleUploadClick = ({ row,  accept = '.pdf' }) => { 
  inputAccept.value = accept
  uploadParams.value = { row }
  nextTick(() => {
    document.querySelector('#upload-file-signedFile').click()
  })
}

const previewClickEvent = () => { 
   let row=selectList.value[0] 
  if (row.templateType == 0) {
    localStorage.setItem("RECORD_DATA", JSON.stringify(row));
    router.push({ path: "/contract/fixtureNotePreview", query: { showForm: true,fixtureNo: formParam.fixtureNo } });
    showForm = true;
  } else {
    localStorage.setItem("RECORD_DATA1", JSON.stringify(row));
    router.push({ path: "/contract/aiccFixtureNotePreview" ,query: { fixtureNo: formParam.fixtureNo } });
    showForm = true;
  }
};



const selectVoyage = (value: String) => {
  //@ts-ignore
  let item = voyages.find(n => n.voyageNo == value);
  if (item) {
    pods = item.pods;
    pols = item.pols;
  }
};

const recordData = ref();
// 编辑页面
const editId = ref(null);
const fixtureNoteClauseList = ref([] as any);
const getFixtureNoteClause = () => {
  service.get("/shipping/fixtureNoteClause?type=1").then(res => {
    if (res.data) {
      res.data.forEach(item => {
        formParam["clause" + item.clauseId] = item.content;
      });
      fixtureNoteClauseList.value = res.data;
    }
  });
};

const editNote = id => {
  editId.value = id;
};
const editTrue = clauseId => {
  ElMessageBox.confirm("Confirm to Save？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Save",
    cancelButtonText: "Cancel"
  }).then(async () => {
    editId.value = null;
    const content = formParam["clause" + clauseId];
    const id = fixtureNoteClauseList.value.find((item:any) => item.clauseId == clauseId).id;
    service.put("/shipping/fixtureNoteClause", { content, type: 1, clauseId, id }).then((res: any) => {
      if (res) {
        ElNotification.success({
          title: "Prompt information",
          message: "Edit the data success!",
          position: "bottom-right"
        });
      }
    });
  });
};
const isFreight = ref(false);
watch(
  () => showForm,
  async() => {
    if (showForm=='true') {
      isFreight.value = route.query.isFreight;
      const fixtureNo = route.query.fixtureNo
      await service.get("/shipping/fixtureNote/getByFixtureNo", {params: {fixtureNo: fixtureNo} }).then((res: any) => {
        Object.keys(res.data).forEach(key => {
          if(res.data[key] != null){
            console.log(res.data[key])
            formParam[key] = res.data[key]
          } 
        })
      })
      if (!formParam.fixtureDate) {
        formParam.fixtureDate = moment(new Date()).format("YYYY-MM-DD");
      }
      if (formParam.terms) {
        duesechecked.value = Boolean(formParam.terms[12]);
        clausesCheckedOne.value = Boolean(formParam.terms[20]);
        clausesCheckedTwo.value = Boolean(formParam.terms[21]);
      }
      if (formParam.laycanStart) {
        formParam.laycan = [formParam.laycanStart, formParam.laycanEnd];
      }
      getFixtureNoteClause();
      formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY \n ";
      formParam.readiness += "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
      let params = { vesselName: formParam.vesselName, voyageNo: formParam.voyageNo, clientCode: formParam.clientCode };
      service
        .post("/shipping/fixtureNote/getAllFinishedByClient", params)
        .then(res => {
          if (res) {
            formParam.pol = res.data.pol;
            formParam.pod = res.data.pod;
            if (res.data.readiness) {
              let readiness = res.data.readiness;
              for (let i in readiness) {
                formParam.readiness +=
                  "ABOUT " +
                  readiness[i].totalUnits +
                  " UNITS OF " +
                  readiness[i].brand +
                  " , AROUND" +
                  readiness[i].totalCbm +
                  " CBM,CARGO TO BE READY BY\n ";
                formParam.readinessCN +=
                  "货物量约为" +
                  readiness[i].totalUnits +
                  "辆" +
                  readiness[i].brand +
                  ",货物需在" +
                  " " +
                  "（具体日期或时间点）前准备就绪\n ";
              }
              formParam.readiness += formParam.readinessCN;
            } else {
              formParam.readiness = "ABOUT  UNIT OF , AROUND CARGO TO BE READY BY \n ";
              formParam.readiness += "货物量约为 货物需在" + " " + "（具体日期或时间点）前准备就绪";
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    }else if (showForm=='false') {
      refreshTable()
    }
  },
  { immediate: true }
);

const applicationNo = () => {
  router.push({ path: "/contract/fixtureNote/applyFixtureNo" });
};
const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};

const save = () => {
  terms.value[12] = Number(duesechecked.value);
  terms.value[20] = Number(clausesCheckedOne.value);
  terms.value[21] = Number(clausesCheckedTwo.value);
  formParam.terms = terms.value;
  formParam.otherClauses = clausesCheckedOne.value ? formParam.clause21 : formParam.clause22;
  // if (terms.value[19] == 1) {
  //   formParam.otherClauses =
  //     "OTHER TERMS AND CONDITIONS AS PER CARRIER'S STANDARD BILL OF LADING AND THE SIGNED " + formParam.signed;
  // }
 
  service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);

  // @ts-ignore
  ElNotification.success({
    title: "Prompt information",
    message: "save successful!",
    position: "bottom-right"
  });
};

const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async valid => {
    if (!valid) {
      return;
    }
    if (!clausesCheckedOne.value && !clausesCheckedTwo.value) {
      ElMessage({
        message: "Please select at OTHER CLAUSES",
        type: "warning"
      });
      return;
    }
    terms.value[12] = Number(duesechecked.value);
    terms.value[20] = Number(clausesCheckedOne.value);
    terms.value[21] = Number(clausesCheckedTwo.value);
    formParam.terms = terms.value;
    formParam.otherClauses = clausesCheckedOne.value ? formParam.clause21 : formParam.clause22;
    // if (terms.value[19] == 1) {
    //   formParam.otherClauses =
    //     "OTHER TERMS AND CONDITIONS AS PER CARRIER'S STANDARD BILL OF LADING AND THE SIGNED " + formParam.signed;
    // }
    await service[isAdd ? "post" : "put"]("shipping/fixtureNote", formParam);

    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right"
    });
    dialogFormVisible.value = false;
    cancelForm();
    refreshTable();
  });
};
const cancelForm = () => {
  router.push({ path: "/contract/fixtureNote" });
  showForm = false;
};
const pageQuery = async e => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => {
  refreshTable();
};

const selectVessel = (value:string) => {
  queryParams.voyageNo = null;
  voyages = (vessels.find(item => item.vesselName == value) || { schedules: [] }).schedules;
};

const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};
const removeClickEvent2 = ()=> {
   var row=selectList.value[0]
   removeClickEvent(row.fixtureId);
};
const removeClickEvent = id => {
  ElMessageBox.confirm("Confirm to Remove the data？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel"
  }).then(async () => {
    await service.delete(`shipping/fixtureNote/${id}`);

    refreshTable();
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "Delete successfully!",
      position: "bottom-right"
    });
  });
};

const selectPortCode = (value: any) => {
  formParam.pod = null;
  formParam.pol = null;
  pods = (voyages.find(item => item.voyageNo == value) || { pods: [] }).pods;
  pols = (voyages.find(item => item.voyageNo == value) || { pols: [] }).pols;
};

const datePickChange = (value: any) => {
  formParam.laycanStart = moment(value[0]).format("YYYY-MM-DD");
  formParam.laycanEnd = moment(value[1]).format("YYYY-MM-DD");
};
const exportClickEvent = async row => {
  downloadFile("/shipping/fixtureNote/export", row, `${moment(new Date()).format("YYYYMMDD")}_.fixtureNote.pdf`);
};

const exportFixtureNo = async () => {
  downloadFile("/shipping/fixtureNote/exportNo", queryParams, "fixtureNote.xlsx");
};

const handleExport = (row,exportType )=> {
  
  row.exportType = exportType 
  let file =  `${moment(new Date()).format("YYYYMMDD")}_.fixtureNote.docx`
  if(exportType == 1){
    file = `${moment(new Date()).format("YYYYMMDD")}_.fixtureNote.pdf`
  }
  downloadFile("/shipping/fixtureNote/export", row, file);
   
};

const handleExport2 = (exportType )=> {
  var row=selectList.value[0]
  handleExport(row,exportType)
   
};

const dialogCommentVisible = ref(false);
const commentFormList = ref(null);
const commentClickEvent=(row)=>{
  service.get("/shipping/auditTrail/getTable?tableName="+row.fixtureNo+"&recordId="+row.fixtureId).then(res => {
    if (res) { 
        if(res.data.length>0){
          commentFormList.value = res.data;
          dialogCommentVisible.value = true;
        }else{
          ElMessage({
            message: "No Comment",
            type: "info"
        })}
    }})
}

const handleStatus = (row: any) => {
  if (row.status != null && row.status != 0) {
    let titleStr:String =  "Confirm to update the Status？"
    if(row.status ==2){
      titleStr ="Confirm to Reject?"
    }
    ElMessageBox.confirm(titleStr, "Confirmation Information", {
      type: "warning",
      confirmButtonText: "Confirm",
      cancelButtonText: "Cancel"
    }).then(async () => {
      if (row.status != 2) {
        await service.put(`shipping/fixtureNote/updateStatus`, row);
        ElNotification.success({
          title: "Prompt information",
          message: "Update Fixture Note status success!",
          position: "bottom-right"
        });
      } else {
        ElMessageBox.prompt("Please input your Comment", "Comment", {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          inputErrorMessage: "Comment"
        })
          .then(({ value }) => {
            if(value){ 
              service.post(`shipping/fixtureNote/reject`, { id: row.fixtureId, comment: value }).then(res => {
            if (res) {
              ElNotification.success({
                title: "Prompt information",  
                message: "Reject Fixture Note success!",
                position: "bottom-right"
              });
            }})}
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "Input canceled"
            });
          });
      }
    });
  }
};
// 上传成功更新数据
const submitUploadForm = async data => {
  formParam.cargoList = data.url;
};
// 上传成功更新数据
const submitUploadFormAppendix = async data => {
  formParam.appendix = data.url;
};
const deleteAppendix =async (data) => { 
  let params = {
    id: data.id,
    url:data.url
  }
  console.log('[ params ] >',params )
  await service["delete"](`/shipping/fixtureNote/deleteFile?id=${data.id}&url=${data.url}`);
	ElNotification.success({ title: "Prompt information", message: "delete the File success!", position: "bottom-right" });
};

let cargo_type = reactive([]);

onMounted(async () => {
  let result = await service.get("/shipping/client/list");
  if (result) {
    clients = result.data;
  }
  result = await service.get("/shipping/carrier/list");
  if (result) {
    carriers = result.data;
  }
  result = await service.get("/shipping/schedule/getAllSchedule");
  if (result) {
    vessels = result.data;
  }

  const res = await proxy.useDict("cargo_type");
  cargo_type = res.cargo_type;
  refreshTable();
});
</script>
<style scoped lang="scss">
.add-container {
  padding-top: 20px;
  background-color: #fafafa;
  min-height: 100%;
}

.form-container {
  margin: auto;
  padding: 20px;
  width: 100%;
  background-color: #fff;
}

.dialog-footer {
  margin: 60px auto 0;
  width: 100%;
  text-align: center;
}

.el-col > span {
  margin-left: 22px;
  line-height: 32px;
  font-size: 14px;
}

.flex-content .el-form-item__content {
  display: inline-block;
}

.el-checkbox {
  color: black;
}

.el-checkbox__label {
  margin-top: 2px;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

::v-deep(.el-form-item__label) {
  font-weight: 400 !important;
}

.header-title {
  width: 100%;
}

.note-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

// .query-wrapper {
//   display: flex;
//   margin: 0 15px 0 25px;
//   border-radius: 3px;
//   align-items: center;
//   height: var(--input-height);
//   font-size: var(--content-font-size);
//   line-height: var(--input-line-height);
//   width: 1200px;
// }
</style>